<template>
  <view>
    <view class="container">
      <Tabs :initTabIndex="initTabIndex" :tabList="tabList" @tabChange="orderTypeChange" />
      <view class="orders_container">
        <view class="order" v-for="order in orderList" :key="order.order_number">
          <view class="order_number">
            <view class="title">订单编号</view>
            <view class="text">{{order.order_number}}</view>
          </view>
          <view class="order_price">
            <view class="title">订单金额</view>
            <view class="text">¥{{order.order_price}}</view>
          </view>
          <view class="order_date">
            <view class="title">订单日期</view>
            <view class="text">{{timestampToDisplay(order.create_time)}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Tabs from "../../components/tabs";
import http from "../utils/http";
import dayjs from "dayjs";
export default {
  data() {
    return {
      tabList: ["全部", "待付款", "待发货"],
      orderList: null, // 订单列表数据
      initTabIndex: 0
    };
  },
  onLoad(options) {
    // options.index是一个字符串
    const index = parseInt(options.index || 0);
    this.initTabIndex = index;
    this.orderTypeChange(index);
  },
  components: {
    Tabs
  },
  methods: {
    // 切换显示不同类型订单
    async orderTypeChange(index) {
      // 请求订单数据
      const type = index + 1; // 1:全部订单 2:待付款 3:待发货
      const token = uni.getStorageSync("token");
      // 获取订单列表
      console.log(token);
      
      const res = await http.get("/my/orders/all", { type }, token);
      this.orderList = res.orders;
    },
    // 时间戳转显示时间
    timestampToDisplay(timestamp) {
      // 2020/6/28 上午8:52:27
      // return new Date(timestamp * 1000).toLocaleString()
      // 手动组装
      // const date = new Date(timestamp * 1000);
      // const year = date.getFullYear();
      // const mounth = date.getMonth() + 1;
      // const day = date.getDate();
      // const hour = date.getHours();
      // const min = date.getMinutes();
      // const sec = date.getSeconds();
      // return `${year}/${mounth}/${day}/ ${hour}:${min}:${sec}`
      return dayjs(timestamp * 1000).format("YYYY/MM/DD HH:mm:ss");
    }
  }
};
</script>

<style lang="less">
	page {
		background: #FAFAFA;
		.orders_container {
			margin-top: 10rpx;
			height: calc(100vh - 88rpx);
			overflow: scroll;
			.order {
				background-color: #fff;
				margin-bottom: 10rpx;
				padding: 44rpx 32rpx;
				.order_number,.order_price, .order_date {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0;
					.title {
						color: #696969;
					}
					.text {
						color: #434343;
					}
				}
				.order_price .text {
					color:#EA4350;
				}
			}
		}
	}
</style>	